
<template>
  <div class="user-wallet" :style="containerStyle">
    <div class="wallet-content" :style="contentStyle">
      <el-icon class="wallet-icon">
        <component :is="data.icon || defaultIcon" />
      </el-icon>

      <div class="wallet-info">
        <h3 class="wallet-title">{{ data.title || '我的钱包' }}</h3>
        <p class="wallet-balance">
          <span class="balance-label">余额：</span>
          <span class="balance-value">{{ data.balance || '0.00' }}</span>
          <span class="balance-unit">{{ data.unit || '元' }}</span>
        </p>
      </div>

      <div v-if="data.showButton" class="wallet-button">
        <el-button
          :type="data.buttonType || 'primary'"
          :size="data.buttonSize || 'default'"
          @click="handleClick"
        >
          {{ data.buttonText || '立即充值' }}
        </el-button>
      </div>
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Wallet } from '@element-plus/icons-vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['click'])

// 默认图标
const defaultIcon = computed(() => Wallet)

// 计算容器样式
const containerStyle = computed(() => {
  return {
    marginTop: `${props.styles.marginTop || 0}px`,
    marginBottom: `${props.styles.marginBottom || 0}px`,
    marginLeft: `${props.styles.marginLeft || 0}px`,
    marginRight: `${props.styles.marginRight || 0}px`,
    padding: `${props.data.padding || 15}px`,
    backgroundColor: props.data.backgroundColor || '#ffffff',
    borderRadius: `${props.data.borderRadius || 4}px`,
    border: props.data.showBorder ? `1px solid ${props.data.borderColor || '#e4e7ed'}` : 'none'
  }
})

// 计算内容样式
const contentStyle = computed(() => {
  return {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between'
  }
})
</script>

<style lang="scss" scoped>
.user-wallet {
  width: 100%;
  box-sizing: border-box;

  .wallet-content {
    .wallet-icon {
      font-size: 40px;
      color: #409eff;
      margin-right: 15px;
    }

    .wallet-info {
      flex: 1;

      .wallet-title {
        margin: 0 0 10px;
        font-size: 16px;
        color: #333;
      }

      .wallet-balance {
        margin: 0;

        .balance-label {
          font-size: 14px;
          color: #666;
        }

        .balance-value {
          font-size: 24px;
          font-weight: bold;
          color: #f56c6c;
          margin: 0 5px;
        }

        .balance-unit {
          font-size: 14px;
          color: #666;
        }
      }
    }

    .wallet-button {
      flex-shrink: 0;
    }
  }
}
</style>
